<script setup lang="ts">
import { get, loadFile, post, Message, message, download, formatEnum } from '@/utils'
import useTable from '@/hooks/useTable'
const props = defineProps<{
  show: boolean
  id: number | string
  userId: any
  addressId: any
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const selectedKeys = ref([props.addressId])
const { formatColumns } = useTable()
const searchQuery = reactive({
  userId: props.userId,
})
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const submit = done => {
  post(
    { url: '/server-shop/sys-seller/order/update/address', data: { id: props.id, addressId: selectedKeys.value[0] } },
    ({ code, msg }) => {
      message({
        type: code == 200 ? 'success' : 'error',
        content: msg,
      })
      if (code == 200) {
        emit('update:show', false)
        emit('confirm')
      }
      done(code == 200)
    },
    () => done(false)
  )
}
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = {
      ...params,
      size: params.pageSize,
    }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/sys-seller/user/address/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const columns = formatColumns([
  {
    title: 'id',
    dataIndex: 'id',
    width: 200,
  },
  {
    title: '收件人',
    dataIndex: 'consignee',
    width: 200,
  },
  {
    title: '联系方式',
    dataIndex: 'mobile',
    width: 200,
  },
  {
    title: '省市区',
    dataIndex: 'province',
    ellipsis: true,
    width: 200,
    render: ({ record }) => h('span', null, `${record.province}-${record.city}-${record.district}`),
  },
  {
    title: '详细地址',
    dataIndex: 'address',
    width: 200,
    ellipsis: true,
  },
])
</script>

<template>
  <CModal v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="1100px" title="修改收货地址" @cancel="emit('update:show', false)">
    <ProTable
      :columns="columns"
      :request="request"
      row-key="id"
      :pagination="pagination"
      header-title=" "
      column-resizable
      :params="searchQuery"
      :scroll="{ x: 1000 }"
      :bordered="{ cell: true }"
      :action-ref="ref => (actionRef = ref)"
      v-model:selectedKeys="selectedKeys"
      :row-selection="{
        type: 'radio',
      }"
    >
      <template #option-render="{ dom, reset }">
        <!-- <component :is="dom[1]" />
        <component :is="dom[0]" /> -->
      </template>
    </ProTable>
  </CModal>
</template>
<style scoped lang="less">
.img {
  width: 40px;
}
.container {
  padding: 0 20px 20px 20px;
}
:deep(.arco-table-th) {
  &:last-child {
    .arco-table-th-item-title {
      margin-left: 16px;
    }
  }
}
.action-icon {
  margin-left: 12px;
  cursor: pointer;
}
.active {
  color: #0960bd;
  background-color: #e3f4fc;
}
.setting {
  display: flex;
  align-items: center;
  width: 200px;
  .title {
    margin-left: 12px;
    cursor: pointer;
  }
}
</style>
